<template>
  <div class="xinzi" ref="xinzi"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
const xinzi = ref(null);
const option = reactive({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}%",
  },
  legend: {
    data: ["30K+", "20K~30K", "15K~20K", "10K~15K", "10K及以下"],
    icon: "circle",
    textStyle: {
      color: "#FFF",
    },
  },
  series: [
    {
      name: "薪资",
      type: "funnel",
      left: "10%",
      top: 60,
      bottom: 60,
      width: "80%",
      min: 0,
      max: 100,
      minSize: "0%",
      maxSize: "100%",
      sort: "descending",
      gap: 2,
      label: {
        normal: {
          show: true,
          position: "inside",
        },
        emphasis: {
          textStyle: {
            fontSize: 20,
            color: "#FFF",
          },
        },
        textStyle: {
          color: "#FFF",
        },
      },
      data: [
        { value: 20, name: "10K及以下" },
        { value: 40, name: "10K~15K" },
        { value: 60, name: "15K~20K" },
        { value: 80, name: "20K~30K" },
        { value: 100, name: "30K+" },
      ],
    },
  ],
});
let asd;
onMounted(() => {
  asd = echarts.init(xinzi.value);
  asd.setOption(option);
});
</script>

<style lang="scss">
.xinzi {
  width: 100%;
  height: 400px;
  transform: rotateY(180deg);
}
</style>
